<template>
  <el-container class="background">
    <el-aside width="400px" class="sp">
      <ChatList style="height: 100%;"/>
    </el-aside>
    <el-main>
      <router-view style="height: 100%;"></router-view>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>

import {onMounted, onUnmounted} from "vue";
import ChatList from "../../../components/ChatList/ChatList.vue";
import {MessageDto, webSocket, webSocketLink} from "../../../utils/webSocket.js";
import {ping} from "../../../service/AccountApi.js";
import {localKey} from "../../../utils/constant";

let timer:NodeJS.Timer;

let keepConnection:any = localStorage.getItem(localKey.keepConnection);

//页面加载之后 绑定websocket
onMounted(() => {
  //主页每隔15 分钟去请求一下
  timer = setInterval(()=>{
    ping(null)
  }, 1050 * (keepConnection))
})

//关闭webSocket
onUnmounted(()=> {
  clearInterval(timer);
})

</script>

<style scoped>

.sp::-webkit-scrollbar{
  display:none
}

.background{
  margin:0px;
  background: url('../../../../public/background2.jpg') no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
}

.el-main{
  opacity: 0.9;
}

.background{
  display: flex;
  height: 100%;
}

</style>